<template>
<div>
  <div class="product">
    <img class="product-logo" src="https://img.alicdn.com/tfs/TB1EGNRRVXXXXazXVXXXXXXXXXX-271-123.png">
    <h1>全球领先、安全、稳定的云计算产品</h1>
    <a href="" target="_blank">计算、存储、网络、安全、大数据、人工智能，普惠科技助您飞跃发展</a>
    <div class="product-layer">
        <div class="product-tab" v-for="item in 5">
            <i class="ali-product-icon"></i>
            <div class="product-name">弹性计算</div>
        </div>
    </div>
  </div>
      <div class="pro-detail">
         <div class="pro-item" v-for="item in 13">对象存储&nbsp;OSS
            <div class="ali-product-normal-item-description">比传统存储成本下降25%~75%的强安全企业级存储</div>
            <i class="el-icon-arrow-right"></i></div>
      </div>
      <ProLayer/>
</div>
</template>
    
<script>
import ProLayer from './ProLayer.vue'
export default {
  name: 'Product',
  components: {
      ProLayer
  }
}
</script>

<style lang="stylus" scoped>
.product
    width 100%
    display flex
    flex-direction column
    align-items center
    font-size 14px
    .product-logo
        display block
        width 130px
        margin 30px 0
    h1
        margin-bottom 10px
        font-size 25px
        font-weight 400
    .product-layer
        display flex
        justify-content space-around
        .product-tab
            width 240px
            height 131px
            display flex
            flex-direction column
            justify-content center
            align-items center
            i
                font-size 50px
                display block
            .ali-product-img
                width 150px
                height 200px
.pro-detail
    position relative
    height 360px
    padding 20px 80px
    background-color #f5f5f6
    display flex
    flex-wrap wrap
    flex-direction column
    align-items center
    &:after
        content "\25b2"
        color #f5f5f6
        position absolute
        top -17px
        left 185px
    .pro-item
        position relative
        height 48px
        width 334px
        padding 12px 20px
        margin 0 32px 0 0
        font-size 14px           
        &:hover
            background-color #fff 
            box-shadow 0 0 8px 0 rgba(0,0,0,.15)
        .el-icon-arrow-right
            position absolute
            right 12px
            top 30px
        .ali-product-normal-item-description
            font-size 10px
            color #9b9ea0
@css {
    .ali-product-icon {
    width: 80px;
    height: 80px;
    background-size: cover;
    background-image: url(https://img.alicdn.com/tfs/TB1XhNOQVXXXXXcaXXXXXXXXXXX-160-160.png) !important;
    }
</style>
<!--             <div class="ali-product-img" style="background-image: url(&quot;https://img.alicdn.com/tps/TB1sd_fLXXXXXX2XFXXXXXXXXXX-150-9000.jpg&quot;); background-position: 0px -2200px;"> -->
